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ADOBE PHOTOSHOP PARA WEB 


O Photoshop nao ë apenas uma aplicaçao de edicäo de imagens qualquer, é a 
mais avancada e mais abrangente aplicacäo de edicäo de imagem profissional. 
O Photoshop nao & apenas lider do mercado, ele permite um integraçao 
fantastica com as demais ferramentas da Adobe®, tanto na area de Internet, 
como impressos, video, e multimidia. 

Um dos campos onde o Photoshop tem ganho cada vez mais destaque é o de 
criação para Internet e dispositivos digitais. Em nosso material vamos criar 
alguns exemplos com foco na Internet finalizando com a criação de um Layout. 

Em nossa apostila a versão usada como base é a CS6, mas você pode usar 
versões anteriores para acompanhar os exercícios. 

É importante que você já tenha um conhecimento mínimo do Photoshop, caso 
precise, você pode baixar a apostila de Photoshop aqui mesmo no 
apostilando.com. 

Tenha uma boa leitura e aprendizado. 


01 - CRIANDO UM BOX DE PREÇOS PARA SITES 


Crie um novo documento de 500x600 no modo de cores RGB e desenhe um 
retângulo de cantos arredondados. Certifique-se de que as cor de foreground 
esteja para branco. 


Name: Untitled-1 


Preset: Custom | Reset 


( Save Preset... |] 


Width: Pixels Delete Preset 
Height: Pixels 

Resolution: 72 Pixels/Inch 

Color Mode: RGB Color ~ 8bit 


Background Contents: white 
Image Size: 


A Advanced 878,9K 


Color Profile: Working RGB: sRGB IEC61966-2.1 


Pixel Aspect Ratio: Square Pixels 


Clique no menu Layer, Layer Style, Stroke. Vamos configurar da seguinte 
forma. Contorno: 1 e cor #707070. 


| = 

| Blending Options: Default | 

I— —I 

[E] Bevel & Emboss 
[E] Contour 


I Texture 


| E] Inner Shadow 


[E] Inner Glow 

| El Satin 

| E Color Overlay 
[E] Gradient Overlay 
[E] Pattern Overlay 


| [El Outer Glow 


E| Drop Shadow 


Depois clique em Gradient Overlay. Coloque como cor primaria: #c2c2c2 e cor 


secundaria como: E9E9E9 


— Presets 


Name: Custom 


Gradient Type: Solid ad 


Smoothness: 1001 » |% 


A opacidade coloque em 54%, ängulo em 90°. 


Blending Options: Default 


[E] Bevel & Emboss 


[E] Contour 


m] res s 
SS = MI) Preview 
I Texture 5 
MI Stroke 
[E] Inner Shadow 


CI Inner Glow 


Satin 


CI Color Overlay 


II Pattern Overlay 
[E] Outer Glow 


| [E] Drop Shadow 


Clique agora em Inner Glow e configure como Blend Mode normal 100%. 


Layer Style x) 


Styles 


Lë 
Blending Options: Default 
| [E] Bevel & Emboss 


[E] Contour 
E [V] Preview 
(I Texture SCT > 

Stroke 

Inner Shadow 
: Softer - 


:C)Center (O) Edge 


Crie um novo retängulo conforme a imagem abaixo. 


Sera necessärio trabalhar os estilos tambëm para este retängulo. Clique em 
Layer Styles, Outer Glovv. 
Como cor coloque #006A9B, coloque os demais itens conforme a imagem. 


Blending Options: Default 


[E] Bevel & Emboss 
[E] Contour 

I Texture 

CI Stroke 


Inner Shadow 


CI Inner Glow 


CI Satin 


CI Color Overlay 


[E] Gradient Overlay 


II Pattern Overlay 


CI Drop Shadow 


p— Presets 


Name: Custom 


Gradient Type: ‘Solid e 


Smoothness: | 100 | +|% 


Stops 


zation 


Color: ar Location: [EM 


Configure o ängulo em 180°. 


Styles 
Blending Options: Default 
[E] Bevel & Emboss 

II Contour 

II Texture 
[E] stroke = 
[E] Inner Shadow E i ) S 
I Inner Glow > 
CI Satin 
E] Color Overlay 
II Pattern Overlay 
[7] Outer Glow 


100 % 


I JReverse IMI Preview 
: Linear IM Align with Layer 


[E] Drop Shadow 


Adicione um efeito de stroke na cor branca com 1px. 


Clique na ferramenta de texto e digite uma palavra sobre o retângulo azul. 


Clique em Layer, Layer Style, Inner shadow. 
Configure da seguinte forma. 


— Inner Shadow 


Blending Options: Default 
` ` Bevel & Emboss 


Structure - 
Blend Mode: Multiply 


Opacity: LZ? 


Ange: A ) 120 ` e ite Global Light 
N / 


A 


Distance: (5 E 


Se Dësem g 


Contour: di [F] Anti-aliased 


Noise: 5" 


Make Default 


[V] Preview 


Blending Options: Default 


II Bevel & Emboss 


si CM 


Inner Shadow 
Inner Glow 
Satin 

Color Overlay 
Gradient Overlay 


rol D D 


II Pattern Overlay 


CI Drop Shadow 


Selecione novamente a ferramenta de shape e escolha line Tool. Trace uma 


linha divisória. Crie as linhas com a cor #ECECEC para preenchimento e 


#BEBEBE como cor de contorno. Defina tambëm Weight com 2 px. 


Clique com a ferramenta de texto digite seus outros textos e depois duplique as 


demais linhas. 


Aplique um efeito de Drop Shadow no texto. 


E. 
HYSI RYE 


Styles 
Blending Options: Default 
Al Bevel & Emboss 

[E] Contour 


E 


CI Inner Shadow 
Inner Glow 

Satin 

-| Color Overlay 
Gradient Overlay 
| Pattern Overlay 
| Outer Glow 


rop Shadow 


Structure — 
Blend Mode: Normal 
Opacty: SL 100 
Angle: (N À 120 © [V]Use Global Light 
WF 
Distance: = 3 
Spread: (SS o 
Soen a | 3 


Quality 
Contour: di [E] Anti-aliased 
Noise: Cs 0 


% 


IMI Layer Knocks Out Drop Shadow 


[V] Preview 
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PHOTOSHOP 


Repita o processo para seus demais textos. 


PHOTOSHOP 
DREAMWEAVER 


FLASH 


Crie uma nova camada, desenhe o retängulo com a ferramenta de Poligonal 


Lasso Tool. 


Para copiar o mesmo efeito de camada produzido anteriormente. Clique com o 
botäo direito do mouse no estilo criado e escolha Copy Layer Style. Depois 
clique na camada com o triângulo e escolha Paste Layer Style. 

Adicione agora um shape de retângulo com cantos arredondados. 

Defina o seguinte estilo de camada. 

Coloque o preenchimento como #666666 


| | Reset 
| = | : ES New Style... 


UJ Contour 


— [V] Preview 
UJ Texture 


| El Stroke 
[E] Inner Shadow 
II Inner Glow 


| [E] Gradient Overlay 
| E] Pattern Overlay 


| 


| [E] Drop Shadow 


Aplique agora o Stroke. 
Cor #aaaaaa e espessura 1. 
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Aplique agora um estilo de gradiente Overlay partindo da esquerda para direita 
com as seguintes opções de cores: #cfcfcfc, #e6e6e6, #d0d0d0 e #elelel. 


= u — 
Gradient Editor o>.) e Se X | 


Presets 


Name: Custom 


Gradient Type: Sold v 


Smoothness: 100| » |% 


Location: % Delete | 


Adicione seu texto e colo o mesmo estilo de camada azul ao texto. 
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02 — EFEITO SPLATER 


Para este exemplo usaremos recursos de clipping mask e estilos de camada. 
Inicie um novo arquivo de 800x600 e crie uma nova camada. 

Preencha com um gradiente radial sendo da na esquerda a cor #F4C8B5 e na 
direita #F2CEC1. 


Name: Custom 


M Gradient Type: Solid m 


| Smoothness: | 100| » |% 


Stops 


Opacity: | » [9 Location: | % Delete 


Color: | D Location: % Delete 


Crie um novo layer e chame novamente a ferramenta de gradiente radial. Na 


esquerda coloque #FA8650 e na direita deixe transparente. 


Name: Custom 


Gradient Type: Solid 


Smoothness: »|% 


Stops 
Opacty: H |+|% Location: 100 % 
Color} (Ip Location: [o J% Delete 
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Aplique o gradiente e depois clique com o botäo direito em sua layer e escolha 


Clipping Mask. 


+ Opacity: 100% 
Lock: ER af Dei & Fill: 100% 
er 
o = 
Si === 


Crie um novo layer e escolha um Brush no estilo Splatter. Deixe as cores de 
Background e Foregound como preto e branco (pressione letra D) e aplique o 
Brush. 


Clique no menu file Place, escolha uma imagem e faça com que a mesma fique 


sobre o brush. Depois clique com o botão direito em sua Layer e escolha 
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Create Clipping Mask. 


I Inner Shadow 


I Outer Glow 


rop Shadow 
Structure — 


Blend Mode: Multiply - E 
Opacity: — 3 


Angle: ( N ) 120 ® [Y]Use Global Light 
NJ 


Distance: (EEE 2 px 
Spread: Fr — 0 % 
See: (Y ane px 


Quality 
Contour: Wi [E] Ant-aliased 


Noise: 0 % 


Aplique alguns Shapes a sua imagem para deixar com outro visual. 


IMI Layer Knocks Out Drop Shadow 
Make Default Reset to Default 


[V] Preview 
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03 - BOTÖES ESTILIZADOS 


Um dos recursos necessarios em qualquer criacäo para a Internet, com certeza 
os botöes podem ser considerados como um dos primordiais. E possivel 
encontrar botöes de diversos formatos e cores. Vamos aprender a criar botöes 
simples que permitam simular a situaçao de ligado desligado. 

Inicie um novo arquivo e com a ferramenta Shape desenhe um retängulo de 


cantos arredondados. 
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Vamos aplicar os seguintes estilos de camadas. 


[V] Preview 


Depois aplique o seguinte efeito de Bevel and Emboss 


—— Bevel £ Emboss 


Shadove Mode: 
Oty: === ES % 


[ Make Defaut | 1 Reset to Default | 


Gradiente Overlay, sendo na esquerda #1378cd e na direita #4da5f0. 
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Presets 


Name: Custom 


Smoothness: | 100 ES % 


- 


— Gradient Type: Sold v 


Reset 


New Style... 
[V] Preview 
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Inclua seu texto. Usei a fonte Lucida sans. 


Vamos aplicar os seguinte estilo gradiente. Cor na esquerda: #9ec7eb e direita 
#ecf6ff 


Name: Custom 


Gradient Type: Solid ké 


Smoothness: [100 | » | % 


5 

am 

e Ei 
Stops 


Opatity: WE % Location; [ 
Color: Ic Location: D 
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Photoshop 


Vamos agora desenhar um quadrado com canto arredondados com um raio de 


5 px. 


7 Align Edges 


en nen les eneen ees 


Para desenhar um quadrado, basta fazer o shape com a tecla SHIFT 


pressionada. 


e, 


Aplicaremos a este novo objeto o seguinte estilo. 


—— Inner Shadow 
— Structure 


Blend Mode: Multiply - E 
Opacity: ken A nd 45 % 
Angle: (N ) 120 © [Z] Use Global Light [V] Preview 


Distance: SC o U 
Choke: === ER U 
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Bevel and Emboss. 


Gloss Contour: Wi 


Highlight Mode: 


Usaremos um gradiente um pouco mais elaborado: 

Posiçao 0: #0e2f4a 

Posiçao 47% : #001a31 

Posiçao 48%: #002545 

Posição 100%: #0f4b7f 

Para criar novos pontos basta clicar sobre uma area na barra dos pontos e 
depois digitar seu valor na caixa Location. 
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p— Presets — 


Name: Custom 


Gradient Type: Solid 


Smoothness: 100 | dk 


r— Stops 


Opacity: 


Color: E >| Location: 49] 


Vamos agora aplicar o efeito de Stroke. 
Em size usaremos 5. E como cores usaremos um gradiente com cor na 
esquerda #1468af e na direita # 50abf8. 
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Cr: =] ` zeen 


Style: Linear sl [7] Align with Layer 


PS D 2 Mother 
SE 


Vamos agora criar um efeito de brilho. 
No primeiro retängulo desenhado clique sobre seu icone com a tecla CTRL 
pressionada para fazer a selecäo. 


Com a tecla ALT pressionada desenhe um retângulo de cima para baixo para 


subtrair uma parte da seleção. 


= Pheteshep. 


Crie uma nova camada, preencha com branco e defina opacidade em 15%. 
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Photoshop 


Repita o processo para criar seus demais botoes. 


Flash 


04 - BOTÄO DE CONTATO ESTILIZADO 


Inicie um novo arquivo e preencha-o com um gradiente radial deixando no 


centro branco e nas bordas a seguinte cor #CCCBCC. 
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Com a ferramenta Shape de cantos arredondados, desenhe um retängulo com 
raio de 180. 


- 


2 Radius: 180px Y don Ed 


Aplique um efeito de camada Gradiente Overlay, sendo na esquerda a cor 
#970505 e na direita a cor # ff5500. 
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Gradient Editor 


— Presets 


Name: Custom 


— Gradient Type: Solid 


Smoothness: 100 lej % 


Location: | 


Location: HEM (6% 


Seu elemento ficara semlhante a imagem abaixo. 


Crie uma nova camada e com a ferramenta de seleçao eliptica desenhe um 
circulo (mantenha a tecla SHIFT pressionada ao desenhar a selecäo). 
Preencha com qualquer cor. 


Clique na camada do retängulo com o botäo direito, escolha Copy Layer Style e 
depois clique na camada do circulo e escolha Paste Layer Style. 


Aplique na camada do circulo um estilo de camada Drop Shadovv. 
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— Drop Shadow 
- Structure — 


Blend Mode: Multiply - HE 
Opacty: = 75 

II Inner Shadow 

|] Outer Glow GE 

1 Inner Glow Distance: QE 5 px 

Pra E ke 
[E] Contour Ste: — ` e 
[L] Texture i 


` 1 Satin | 
Fl cda coour: ad) [F] Anti-aliased 


[7] Gradient Overlay Nose: Gg % 
II Pattern Overlay 
[| Stroke 


Ange: ( «JE ` e Dee Global Light [V] Preview 


[V] Layer Knocks Out Drop Shadow 
[ Make Defaut | | Reset to Defaut | 


Seu elemento devera estar como a imagem abaixo. 


Pressione a tecla CTRL e clique sobre o icone de seu circulo. 


Crie uma nova camada Preencha de branco. 
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Desfaca a seleçao, pressione CTRL+T e diminua o tamanho de seu circulo. 


Selecione agora a ferramenta Shape, escolha Custom Shape Tool. 


Localize o envelope 


EK VU 


er com... 
wa Nw 6 jo C 
ky OOK OORVOO)© 


a A BR (N me nn DIT A A ee cs el, SN. 


Desenhe um envelope na area em branco e depois cole 0 estilo que copiamos 


do retangulo. 
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Basta agora definir o formato e exportar sua imagem. 


05 — MENU COMO WINDOWS VISTA 


Inicie um novo arquivo no tamanho de 600x335 
Visualize as guias e trace duas guias em 285 px e 310 px conforme imagem 
abaixo. 


Crie uma nova camada chamada Upper Bar e faca uma selecäo retangular que 


fique sobre toda as linhas. Preencha-o com uma cor, depois aplique um 
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gradiente Overlay #000000 para #0c0c0c em 90º. 
‘Gradient Editor | 


Presets 


Reset 


Load... 
| Save... 


Name: Custom 


Gradient Type: Solid ké 


Smoothness: 100 > |% 


Duplique a camada e mude o gradiente para #35393d e #787b7d. 
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r— Presets 


Name: Custom 


Gradient Type: 


Smoothness: 100 | 


aton 


Color: B Location: II o 


Arraste-o para cima e deixe os dois retângulos 


Selecione ambos e deixe com opacidade em 90%. 
Selecione a ferramenta linha, deixe-a em 2 px e trace uma linha superior com a 


seguinte cor #9fa2a4. Trace uma nova linha na cor #484b4d, e suba ela de 
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forma que fique acima da primeira linha. 


Crie agora as divisões na barra para seus menus. Usaremos o traço com a cor 
#43474b. 


Duplique a camada conforme a necessidade de sua barra. 


Escreva agora os nomes de seus menus com a branca. 
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Adicione uma imagem de fundo. 


Produtos Tutoriais — Contato 


Crie um novo retângulo com cantos arredondados e rasterize camada (Layer, 


rasterize, shape). 
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Faça uma selecäo, clique na layer da imagem e pressione CTRL+J para gerar 
uma nova camada com a seleçao preenchida com a imagem. 


Aplique um Gaussian Blur de 5 px. 


Home — Blog Produtos  Tutoriais + Contato” 


Aplique um efeito de Drop Shadow conforme a imagem. 
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| | Blend Interior Effects as Group 

Blend Clipped Layers as Group 

KA Transparency Shapes Layer 
Layer Mask Hides Effects 

| (Vector Mask Hides Effects 


Adicione seu logo ou escreva seu texto dentro do retängulo. 


Vamos criar um efeito de destaque em um item de menu. A ideia é que este 


seja o efeito ao passar o mouse. 
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Com a ferramenta Forma desenhe uma elipse e preencha com a cor #5C94C5. 


Tutoriais + Contato 


Home Biog Tutoriais + Contato — 


Apague o excesso de Blur que sai para os lados do botão. 
Posicione-o abaixo da palavra do menu e se desejar diminua o seu 


preenchimento. Eu deixei com 80%. 
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06 -CRIANDO UM LAYOUT WEB 


Inicialmente vamos definir o tamanho de nosso projeto. 

Para que seu site fique bem visivel em uma resolugao em 800x600, vocé pode 
montar um layout com 760x420. Porém esse tamanho prende muito a criaçao. 
Uma largura de 780px é visto na maioria dos navegadores e quanto a altura, eu 
aconselho a nao ficar preso a ele, pois é visto que o usuário não enfrenta 
problemas em rolar a tela abaixo e acima, diferente se o mesmo precisar rolar 
para esquerda e direita. 


Vamos iniciar um projeto com 900x1000 px. 
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CH File Edit Image layer Select Filter Analysis 3D View Window Help | Dr s7 AO Sim we | ESSENTIALS » — 5 x 


Der Det ao -  Cëertegergenn | Fads Bo | SSA Wan A | 


Untitied-1 @ 66,7% (RGB/8) * x 


Për net SER SNEAD 


ER Më 
D 


sa E E ai 3 


Tre com Gen 


Vamos renomear a camada atual como fundo 
Dé um duplo clique na cor de Foreground e escolha a cor a ser aplicada ao 


fundo. 


Add To Swatches 
ORN Color Libraries 


OH: 70 ° Ot :91 


O® 


E 
o) 


OB: 91 


: BE C 

1G; 233 M:1 % 
Y 
K 


E 
T 
w 
N 


[E] Only Web Colors 


# eleoba 


Após a escolha da cor, clique na ferramenta Paint Bucket (Balde de Tinta), que 


fica junto à ferramenta gradiente. 


S K Gradient Tool G 
ei m Ji Paint Bucket Tool G 
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Vamos definir agora a area de nosso site, clique na ferramenta de seleçao 
retangular. Marque a opcäo Fixed Size e defina o tamanho, no caso 780x900px 
e crie a seleçao. 


Depois de feita a seleçao crie um grupo e de um nome a ele, depois crie uma 


camada e preencha a camada com a seleçao ainda ativa. 
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Importando arquivo do Corel Draw 
Muitas vezes, vocë recebera algum arquivo de seu cliente em formato Corel 


Draw, isso é muito comum em se tratando de logotipos. 


Com o arquivo aberto no Corel Draw. 
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i Restaurante 
R PEDRA CHATA 
me COL OG CO ` 


SSPrxFE>POCOCOP er LarA 


ai 
E = 
H a = = 
PON idei > bp RT m ra B Ki $ 
ox 
i; Segundo dique para Girar findinar Clique duplo na ferramenta seleciona todos os objetos; Shift+dique para së... H [1 


(134,377; 256,682) Próximo dique para Arrastar Escala; 


E coro veb BW CorelDRAW xs - ıp... "7 Adobe Photoshop C të cursowebdesigner. 


Faça uma seleçao em volta de seu objeto e clique no Menu Arquivo, exportar. 
Na caixa que se abre, escolha a opção PSD — Adobe Photoshop, marque 


também a opçao “Somente selecionados”, defina o local e clique em Exportar 


(ee +» Computador » Disco Local (D:) » DEN | Pesquisar 21 


LIN Organizar v EE Nodos dë exibiçao "e Lë Nova Pasta 

Links Favoritos Nome Modificado em Tipo Tamanho mate 
di Ameri 's Ali | 

E poii di American McGee's Alice Ê 
di curso web i 


E) Locais Recentes 
= E Documentos 
MM Computador i 
= P Ji documentos e outros 


BE Desktop di dvds pai 
Mais » di estudo 
A facinter 
Pastas a | filmes = 
Nome: (288) - 
E 


[E] Não mostrar caixa de 


diálogo de filtro 
Tipo de | Compactação RLE ~ 


compactação 


Na próxima etapa, você precisa definir a dimensão, a resolução (no caso usei 
150dpi, o acerto para 72 será feito depois na exportação do layout), verifique se 
está marcado a opção “Fundo Transparente”. 
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[C] Simulado 
[7] Aplicar perfil ICC 
[_] Impressão sobreposta de preto sempre 


Clique em OK 


Abra o arquivo no Photoshop. 


Arraste e posicione o seu logo. 


Crie uma nova layer, a posicione abaixo do logo e preencha-a com uma cor. 


Crie também outro grupo interno com o nome de topo. 
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a, mw 


IMI Layer Knocks Out Drop Shadow 


S 


[7] Preview 


= 
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Preview 


= 


Salvar em: m pedra_chata - 6 2 Ce fv 


Nome | Modificad... Tipo Tamanho Marcas 


A fotos01 
Locais Recentes 


Desktop 


inicial 


| Photoshop ('.PSD:”.PDD) 


~| As a Copy C] Notes 
|] Alpha Channels [ | Spot Colors 
| Layers 


Use Proof Setup: Working CMYK 
“CC Profile: sRGB IEC61966-2.1 


[Z] Thumbnail [7] Use Lower Case Extension 


| 


Insira um arquivo de floral, se necessario remova seu fundo. Depois 


redimensione o seu floral. 
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PEDRA CHATA 
ms E C G 1 C 0 


Yu Ore 


Crie uma nova layer com o nome de faixa e faça uma faixa, no caso com o 
conta-gotas eu capturei a cor usada na Layer. 

Vamos também mudar a cor de nosso floral. Clique com a tecla CTRL 
pressionada no icone da Layer do floral. Isso fará com que o floral fique 
selecionado. Clique no menu Edit, Fill, Foreground (no caso do exemplo como 


capturei a cor do logo no passo anterior, a cor já estava como Foreground). 


I 


PEDRA CHATA) 
EG I C O 


OLO 6 


Vamos recortar também o floral que está saindo da área de nosso layout. 
Dë um CTRL+Clique no retângulo verde. Mantenha a Layer Floral selecionada. 


I 


[PEDRA CHATA) 
Bes ECOLOGICOm 


Inverta a selecäo (Menu Select, Inverse). Caso queira manter uma copia dos 
florais para uma correcäo posterior, duplique a camada e mantenha-a oculta 
(CTRL+J). 

Agora vamos criar as abas de nosso menu principal. 
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Com a ferramenta de demarcador de cantos arredondados, crie os retängulos, 
e selecione-os. 
Ao selecionar os botöes na barra de propriedades, clique no botäo de 


espaçamento, para deixar os espaços iguais. 


` ba > | ClAuto-Select: Group ~ Show Transform Contos | Sief EA d| SSA njohu | də 


PEDRA CHATA]/ 


(Normal ~ jOpacity:) 100% > 


Lock: [J JS ta E: [10086 | > | 


Shape 1 c... 


Shape 1 c... 


Shape 1 c... 


Shape 1 


Rasterize os Shapes e preencha com uma cor. No exemplo criei um gradiente 


com as cores do texto “Pedra Chata” do logotipo. 


PEDRA CHATA 


EGJO TOG GO E: 


Acrescente os títulos de seu menu. 
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PEDRA CHATA| 2 


emo loke ike O E 
z = CT gf aS - emm, BET SË P 
HOME E quemsomos RB tocatização CONTATO 


Crie um novo grupo chamado miolo e crie dentro dele uma nova layer. 
Preencha essa nova layer com um CRO, no caso utilizei uma composicäo de 


gradiente com a cor da palavra “Restaurante”. 


| PEDRA CHATA [Ya | 
——2 A de SS Su 


ri SEN eme 
HOME E RESTAURANTE LI LOCALIZAÇÃO ` | CONTATO 


No canto direito, colocaremos uma foto maior e dentro dessa foto algumas 


menores, dando a ideia de um mini album de fotos. 


AE all 
PEDRA CHATA e 
OLOG < 
? E RESTAURANTE pë gës, Ss 
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Vamos colocar tambëm uma mensagem de Boas Vindas. 


| RESTAURANTE LOCALIZAGAO 1 | CONTATO 


Venha apreciar uma deliciosa 
comida caseira com sua familia e 
» se libertase do stress neste 
maravilhoso Restaurante q esta 


SAIBA MAIS 


Utilizando os mesmos procedimentos que fizemos até o momento finalize seu 
layout. 


Veja como ficou nosso exemplo. 


51 


Verh 2: ep ume dele wurde 
caseira com sua familia e se liberta-se 
do stress neste maravilhoso Restaurante 
que esta provimo de vm, 


RAIRA MAIS 


Cardápios Eventos 


Quarta-feira Häere Domingos Dia PURE JANTAR DANÇAN IF 
CARNEIRO FEIJOADA CULINÁRIA e a e Ao te tc 
Ia "A 
FOLONLSA Adqulra seu ingresso 


RAIRA MAIS 


Rus Jacob Manfron, 1087 - Campo MagroiPR (41) 3677-1139 


E comum ao finalizar um layout, enviar o mesmo em JPG para o 
cliente aprovar antes de comecar a montagem. Isso faz com que se 


evite um retrabalho. 


Vamos exportar nossa arte. 


Clique no menu, file, Save for Web & devices. 
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Preset: [Unnamed] 


ia, di 
PEDRA CHATA)? 


QRO GE O 


Venha apreciar uma deliciosa comida 
caseira com sua familia e liberta-se do 
stress neste maravilhoso Restaurante 
que esta proximo de vocês. 


SAIBA MAIS 


er = 


E RESTAURANTE 


SË m% [=] 


[ Device Central... | { Preview... 


[F] Progressive 
[V] Optimized 
~| Embed Color Profile 


[V] Convert to sRGB 
Preview: Monitor Color 
Metadata: ‘Copyright and Contact Info 


Color Table 


Image Size 
w: 900 px 1 S Percent: 100 % 
H: 1000 pe AJ" Quality: Bicubic vr 
Animation 
Looping Options: | Once 


lofi [sta | al > m e | 


Reset ] | Remember ] 


Verifique se está no formato JPG e com qualidade 72 dpi. Depois clique em 


Save. 


Com isso finalizamos nosso estudo do Photoshop voltado à criação web. 


Para saber mais sobre como utilizar o Photoshop e técnicas de criação para I, 


consulte as apostilas do apostilando.com. 
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